<template>
	<view class="page-wapper">
		<globalheader title="添加银行卡">

		</globalheader>
		<view class="page-content">

			<u-form ref="formdom" label-position="top" errorType="toast" :model="state.formdata" :rules="rules"
				style="margin-top: 10rpx;">

				<u-form-item prop="name" label="银行名称">
					<view class="inputwapper">

						<input type="text" placeholder="请输入银行名称" v-model="state.formdata.name" />

					</view>
				</u-form-item>
				<u-form-item prop="no" label="银行卡号">
					<view class="inputwapper">

						<input type="text" placeholder="请输入银行卡号" v-model="state.formdata.no" />

					</view>
				</u-form-item>
				<!-- <u-form-item prop="area" label="所在地区">
					<view class="inputwapper" @tap="state.picker=true">
						<text class="">{{city?city:'省、市、区'}} </text>
						<u-icon></u-icon>
					

					</view>
				</u-form-item> -->
				<!-- <u-form-item prop="address" label="详细地址">
					<view class="inputwapper">

						<input type="text" placeholder="小区、写字楼、门牌号等" v-model="state.formdata.address" />

					</view>
				</u-form-item> -->

			</u-form>
			<!-- <u-picker :show="state.picker" ref="picker" keyName="name" @change="changeHandler" :loading="state.loading"
				closeOnClickOverlay @close="close" itemHeight="40" :showToolbar="true" :columns="state.columnData"
				@open="open" @cancel="state.picker=false" @confirm="confirm"></u-picker> -->
			<button class="button" @tap="onsubmit">保存</button>


		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		onMounted,
		getCurrentInstance,
		nextTick
	} from 'vue';
	import {
		onLoad,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import LC from '@/LC'
	let state = reactive({
		picker: false,
		loading: false,
		address: [
			[],
			[],
			[]
		],
		columnData: [
			[],
			[],
			[]

		],
		id: null,
		formdata: {
			name: '',
			no: '',
			// province: '',
			// city: '',
			// area: '',
			// address: '',


		},
		obj: {},
		column: [
			[]
		],
		data: []
	})


	const rules = computed(() => {
		return {
			name: [{
					required: true,
					message: '请输入银行名称',
					trigger: ['blur', 'change']
				}
			],
			no: [{
				required: true,
				message: '请输入银行卡号',
				trigger: ['blur', 'change']
			}],
			


		}
	})
	onMounted(() => {

	})
	let city = computed(() => {

		if (state.formdata.whole_address) {
			return state.formdata.whole_address
		}
		return state.address.map(a => a.name).join('')
	})


	let formdom = ref(null)

	function onsubmit() {

		formdom.value.validate().then(res => {
			send()
		}).catch(err => {
			formdom.value.clearValidate()

			console.log('表单错误信息：', err);
		})
	}

	function close() {
		state.picker = false

	}

	function open() {
		state.picker = true
		init()

	}
	let picker = ref(null)
	// async function init(index = 1, parent = 0) {
	// 	state.loading = true
	// 	if (!state.column[0].length) {
	// 		const res = await LC.$api.user.getCity({
	// 			level: index,
	// 			parent
	// 		})
	// 		state.loading = false
	// 		if (res.code == 200) {


	// 			picker.value.setColumnValues([index - 1], res.data)
	// 			if (index === 1) {
	// 				// state.formdata.province =res.data[0].code
	// 				// state.column[0]=res.data
	// 				init(2, res.data[0].code)
	// 			}
	// 			if (index === 2) {
	// 				// state.formdata.city =res.data[0].code
	// 				init(3, res.data[0].code)

	// 			}

	// 			if (index === 3) {
	// 				// state.formdata.area =res.data[0].code

	// 			}
	// 			// state.address[index-1]=res.data[0]

	// 		}
	// 	}
	// }

	function changeHandler(e) {
		const {
			columnIndex,
			value,
			values, // values为当前变化列的数组内容
			index,
			// 微信小程序无法将picker实例传出来，只能通过ref操作
			picker
		} = e
		// 当第一列值发生变化时，变化第二列(后一列)对应的选项
		console.log(value)

		// picker为选择器this实例，变化第二列对应的选项
		if (columnIndex === 2) {
			if (!value[columnIndex]) {
				return
			}

			// state.formdata.area =value[columnIndex].code
			// state.address=value
			return
		}
		// if(columnIndex===1){
		// if(!value[columnIndex]){
		// 	return
		// }
		// 	// state.formdata.city =value[columnIndex].code
		// 	// state.address=value

		// }
		// if(columnIndex===0){
		// 		if(!value[columnIndex]){
		// 			return
		// 		}

		// 	// state.formdata.province =value[columnIndex].code
		// 	// state.address=value
		// }
		if (!value[columnIndex]) {
			return
		}
		init(columnIndex + 2, value[columnIndex].code)


	}

	async function send() {
	

		const res = await LC.$api.pay.accountadd(
			state.formdata,
			
		)
		if (res.code == 1) {
			
				LC.$store('user').banklist()
				uni.navigateBack({
					success() {
						uni.$u.toast('成功')
					}
				})
			



		}
	




	}

	function confirm({
		value
	}) {
		state.address = value
		state.formdata.province = value[0].code
		state.formdata.city = value[1].code
		state.formdata.area = value[2].code
		state.formdata.whole_address = ''
		state.picker = false
	}


	onLoad(async ({
		id
	}) => {
		if (id) {
			state.id = id
			const res = await LC.$api.user.addressDetail(state.id)
			if (res.code == 200) {
				state.formdata = res.data
			}
		}
	})
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item__body__left {
		width: auto !important;
		margin-top: 10rpx;

	}

	::v-deep .u-form-item__body__left__content__label {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 23rpx;
		color: #333333;
		line-height: 32rpx;
	}

	.tab {
		margin-bottom: 10rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 27rpx;
		color: #999999;
		line-height: 38rpx;

		.tabitem {
			margin-right: 30rpx;
		}

		.active {
			font-weight: 600;
			color: #333333;
		}
	}

	.form-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 27rpx;
		color: #333333;
		line-height: 38rpx;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}

	.img-wapper {
		padding: 55rpx 21rpx;
		background: #FFFFFF;
		align-items: stretch;
		border-radius: 15rpx;

		width: 100%;

		.left {
			.title1 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 31rpx;
				color: #333333;
				line-height: 42rpx;
			}

			.title2 {
				margin-top: 10rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #999999;
			}
		}

		.icon {
			width: 383rpx;
			height: 240rpx;
			margin-left: auto;
		}
	}

	::v-deep .u-form-item__body {
		padding: 10rpx 0;
	}

	.button {


		height: 86rpx;
		flex-shrink: 0;
		margin-top: auto;
		background-color: #FC5652;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 31rpx;
		width: 100%;
		line-height: 86rpx;
		color: #fff;

		margin-top: auto;

		&.dis {
			background-color: #CCCCCC;
		}

		&::after {
			display: none;
		}


	}

	.inputwapper {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 31rpx 23rpx;
		background: #f9f9f9;
		border-radius: 15rpx;

		.code-button {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 23rpx;
			color: #FC5652;
		}

		.icon {
			margin-left: auto;
			width: 53rpx;
			height: 53rpx;
		}

		.label {
			width: 135rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #333333;
			line-height: 38rpx;

		}

		input {
			flex: 1;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #333;
		}
	}

	.tab {
		margin-bottom: 10rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 27rpx;
		color: #999999;
		line-height: 38rpx;

		.tabitem {
			margin-right: 30rpx;
		}

		.active {
			font-weight: 600;
			color: #333333;
		}
	}

	.left-icon {
		display: flex;
		width: 41rpx;
		height: 42rpx;
	}

	.page-wapper {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.page-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		padding-top: 10rpx;

	}
</style>